<template>
    <div id="home" class="home">
    </div>
</template>
<script>
import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import SEA from '../assets/img/sea.png'
import BEAR from '../assets/model/bear.gltf'
import LION from '../assets/model/lion.gltf'
import HORSE from '../assets/model/horse.gltf'

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(1.5, 1, 1.5);
scene.add(camera);

const renderer = new THREE.WebGLRenderer(
    {
        // 设置抗锯齿
        antialias: true,
        //   对数深度缓冲区
        logarithmicDepthBuffer: true,
    }
);
renderer.setSize(window.innerWidth, window.innerHeight);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true
export default {
    data() {
        return {
            controls: null,
            textureLoader: null
        }
    },
    mounted() {
        this.loadTexture();
        this.addLight()
        this.addBear()
        this.windownEvent()
        document.getElementById('home').appendChild(renderer.domElement);
        this.render()
    },
    methods: {
        windownEvent() {
            window.addEventListener('resize', (e) => {
                // 宽高比
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setPixelRatio(window.devicePixelRatio);
            })
        },
        render() {
            renderer.render(scene, camera);
            requestAnimationFrame(this.render);
        },
        loadTexture() {
            this.textureLoader = new THREE.TextureLoader().load(SEA)
            this.textureLoader.mapping = THREE.EquirectangularRefractionMapping
            scene.background = this.textureLoader
            scene.environment = this.textureLoader
        },
        addBear() {
            const gltfLoader = new GLTFLoader()
            gltfLoader.load(HORSE, gltf => {
                // gltfLoader.load(LION, gltf => {
                // gltfLoader.load(BEAR, gltf => {
                const model = gltf.scene.children[0]
                model.material = new THREE.MeshPhongMaterial({
                    color: 0xffffff,
                    envMap: this.textureLoader,
                    refractionRatio: 0.75,
                    reflectivity: 0.99
                })
                scene.add(model)
            })
        },
        addLight() {
            const light = new THREE.AmbientLight(0xffffff, 1)
            scene.add(light)
        }
    }
}
</script>
<style>
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#home {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>